iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

React系列 第 4

React的渲染特性

  • 分享至 

  • xImage
  •  

React要怎麼產生畫面呢?首先我們在專案目錄底下的public找到index.html這個檔案,你會發現它除了一個id叫root的空div什麼都沒有,那它是如何顯示出東西的呢

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

打開專案資料夾底下的src資料夾並在裡面找到index.js,這個檔案可以說是程式的進入點,它會把包在ReactDOM.render裡面的東西渲染在html檔裡面的root標籤內,現在它將App這個元件渲染出來所以你會看到一個React的標誌在轉,關於元件之後會說到

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

你可以試著在render加一點東西然後存檔看看,也會被渲染出來,順帶一提React自己有Hot Loader工具,當你修改完code並儲存的時候它就會幫你刷新畫面,就不用自己再去重整一次囉

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <App />,
  <div>Hello World!</div>,
  document.getElementById('root')
);

對不起,我因為自己的疏忽,忘記要發文,結果30天挑戰失敗了,各位imac團隊的隊友對不起QQ


上一篇
React專案目錄介紹
下一篇
React的元件化特性
系列文
React6
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言